<script setup lang="ts">
      const props= defineProps<{
        msg?: string;
        full?:boolean;
      }>()
      
      const emit = defineEmits<{
        (e: 'change', keyCodes: number[]): void
      }>();

import type { Ref } from 'vue';
      import { watch, watchEffect } from 'vue';
      import { mergeProps } from 'vue';
      import { onMounted } from 'vue';
      import { computed, ref } from 'vue';

      declare type keyPros={
        text:string | string[],
        keyCode?:number,
        width?:number,
        logo?:boolean,
        fontSize?:number,
        sign?:boolean,
        height?:number,
        width2?:number,
      }

        const buttons:Ref<keyPros[][]> = ref([[]]);
        const buttonsFull:keyPros[][] = [
    [
        {text:"Esc",keyCode:  27 },
        {text:"",width:1.2},
        {text:"F1",keyCode:  112 },
        {text:"F2",keyCode:  113 },
        {text:"F3",keyCode:  114 },
        {text:"F4",keyCode:  115 },
        {text:"",width:1.2},
        {text:"F5",keyCode:  116 },
        {text:"F6",keyCode:  117 },
        {text:"F7",keyCode:  118 },
        {text:"F8",keyCode:  119 },
        {text:"",width:1.2},
        {text:"F9",keyCode:  120 },
        {text:"F10",keyCode:  121 },
        {text:"F11",keyCode:  122 },
        {text:"F12",keyCode:  123 },

        
        {text:"",width: 17.8,logo:true},
        {text:["Print","Screen"],keyCode:  44, fontSize: 0.8 },
        {text:"Scroll Lock",keyCode:  145, fontSize: 0.8 },
        {text:"pause Break",keyCode:  19, fontSize: 0.8 },
    ],
    [
        
    ],
    [
        {text:["~","`"],keyCode:  192 },
        {text:["1", "!"],keyCode:  49 },
        {text:["2","@"],keyCode:  50 },
        {text:["3","#"],keyCode:  51 },
        {text:["4","$"],keyCode:  52 },
        {text:["5","%"],keyCode:  53 },
        {text:["6","^"],keyCode:  54 },
        {text:["7","&"],keyCode:  55 },
        {text:["8","*"],keyCode:  56 },
        {text:["9","("],keyCode:  57 },
        {text:["0",")"],keyCode:  48 },
        {text:["-","_"],keyCode:  189 },
        {text:["=","+"],keyCode:  187 },
        {text:"←Backspace",keyCode:  8 ,width: 6,fontSize: 0.8},						
        
        {text:"",width:1.2},
        {text:"Insert",keyCode:  45 , fontSize: 0.8},
        {text:"Home",keyCode:  36, fontSize: 0.8 },
        {text:"Page Up",keyCode:  33, fontSize: 0.8 },

        
        {text:"",width:1.2},
        {text:"Num Lock",keyCode:  144 , fontSize: 0.8},
        {text:"/",keyCode:  111 },
        {text:"*",keyCode:  106 },
        {text:"-",keyCode:  109 },
    ],
    [
        {text:"Tab",keyCode:  9 ,width: 4},
        {text:"Q",keyCode:  81 },
        {text:"W",keyCode:  87 },
        {text:"E",keyCode:  69 },
        {text:"R",keyCode:  82 },
        {text:"T",keyCode:  84 },
        {text:"Y",keyCode:  89 },
        {text:"U",keyCode:  85 },
        {text:"I",keyCode:  73 },
        {text:"O",keyCode:  79 },
        {text:"P",keyCode:  80 },
        {text:"[",keyCode:  219 },
        {text:"]",keyCode:  221 },
        {text:"Enter",keyCode:  13 ,width: 5,width2:6.2},

        {text:"",width:6.4},
        {text:"Delete",keyCode:  46, fontSize: 0.8 },
        {text:"End",keyCode:  35, fontSize: 0.8 },
        {text:"Page Down",keyCode:  34 , fontSize: 0.8},

        {text:"",width:1.2},
        {text:"7",keyCode:  103 },
        {text:"8",keyCode:  104 },
        {text:"9",keyCode:  105 },
        {text:"+",keyCode:  107 ,height:10},
    ],
    [
        {text:"Caps Lock",keyCode:  20 ,width: 6},
        {text:"A",keyCode:  65 },
        {text:"S",keyCode:  83 },
        {text:"D",keyCode:  68 },
        {text:"F",keyCode:  70 ,sign:true},
        {text:"G",keyCode:  71 },
        {text:"H",keyCode:  72 },
        {text:"J",keyCode:  74 ,sign:true},
        {text:"K",keyCode:  75 },
        {text:"L",keyCode:  76 },
        {text:[":",";"],keyCode:  186 },							
        {text:['"',"'"],keyCode:  222 },
        {text:["|","\\"],keyCode:  220 },


        {text:"",width:15.2},
        {text:"4",keyCode:  100 },
        {text:"5",keyCode:  101 },
        {text:"6",keyCode:  102 },
    ],
    [
        {text:"⇧ Shift",keyCode:  16 ,width: 8},
        {text:"Z",keyCode:  90 },
        {text:"X",keyCode:  88 },
        {text:"C",keyCode:  67 },
        {text:"V",keyCode:  86 },
        {text:"B",keyCode:  66 },
        {text:"N",keyCode:  78 },
        {text:"M",keyCode:  77 },					
        {text:["<",","],keyCode:  188 },
        {text:[">","."],keyCode:  190 },
        {text:["?","/"],keyCode:  191 },
        {text:"⇧ Shift",keyCode:  16 ,width: 7.5},
        
        {text:"",width:4.3},
        {text:"↑",keyCode:  38 },

        
        {text:"",width:4.4},
        {text:"1",keyCode:  97 },
        {text:"2",keyCode:  98 },
        {text:"3",keyCode:  99 },
        {text:"Enter",keyCode:  13 ,height:10},
    ],
    [
        {text:"Ctrl",keyCode:  17 ,width:4},
        {text:"Win",keyCode:  91 ,width:4},
        {text:"Alt",keyCode:  18 ,width:4},
        {text:"Space",keyCode:  32 ,width: 20},
        {text:"Alt",keyCode:  18 ,width:3},
        {text:"Win",keyCode:  91 ,width:3},
        {text:"↑",keyCode:  38 ,width:4},
        {text:"Ctrl",keyCode:  17 ,width:4.3},
        
        {text:"",width:1.2},
        {text:"←",keyCode:  37 },
        {text:"↓",keyCode:  40 },
        {text:"→",keyCode:  39 },

        
        {text:"",width:1.1},
        {text:"0",keyCode:  96 ,width:6.2},
        {text:".",keyCode:  110 },
    ]
          ];
        const buttonsSimple:keyPros[][] = [
            [
                {text:"Esc",keyCode:  27 },
                {text:"",width:1.2},
                {text:"F1",keyCode:  112 },
                {text:"F2",keyCode:  113 },
                {text:"F3",keyCode:  114 },
                {text:"F4",keyCode:  115 },
                {text:"",width:1.2},
                {text:"F5",keyCode:  116 },
                {text:"F6",keyCode:  117 },
                {text:"F7",keyCode:  118 },
                {text:"F8",keyCode:  119 },
                {text:"",width:1.2},
                {text:"F9",keyCode:  120 },
                {text:"F10",keyCode:  121 },
                {text:"F11",keyCode:  122 },
                {text:"F12",keyCode:  123 },
                {text:"○",keyCode:  200 },
                
            ],
            [
                
            ],
            [
                {text:["~","`"],keyCode:  192 },
                {text:["1", "!"],keyCode:  49 },
                {text:["2","@"],keyCode:  50 },
                {text:["3","#"],keyCode:  51 },
                {text:["4","$"],keyCode:  52 },
                {text:["5","%"],keyCode:  53 },
                {text:["6","^"],keyCode:  54 },
                {text:["7","&"],keyCode:  55 },
                {text:["8","*"],keyCode:  56 },
                {text:["9","("],keyCode:  57 },
                {text:["0",")"],keyCode:  48 },
                {text:["-","_"],keyCode:  189 },
                {text:["=","+"],keyCode:  187 },
                {text:"←Backspace",keyCode:  8 ,width: 6,fontSize: 0.8},						                
            ],
            [
                {text:"Tab",keyCode:  9 ,width: 4},
                {text:"Q",keyCode:  81 },
                {text:"W",keyCode:  87 },
                {text:"E",keyCode:  69 },
                {text:"R",keyCode:  82 },
                {text:"T",keyCode:  84 },
                {text:"Y",keyCode:  89 },
                {text:"U",keyCode:  85 },
                {text:"I",keyCode:  73 },
                {text:"O",keyCode:  79 },
                {text:"P",keyCode:  80 },
                {text:"[",keyCode:  219 },
                {text:"]",keyCode:  221 },
                {text:"Enter",keyCode:  13 ,width: 5,width2:6.2},
            ],
            [
                {text:"Caps Lock",keyCode:  20 ,width: 6},
                {text:"A",keyCode:  65 },
                {text:"S",keyCode:  83 },
                {text:"D",keyCode:  68 },
                {text:"F",keyCode:  70 ,sign:true},
                {text:"G",keyCode:  71 },
                {text:"H",keyCode:  72 },
                {text:"J",keyCode:  74 ,sign:true},
                {text:"K",keyCode:  75 },
                {text:"L",keyCode:  76 },
                {text:[":",";"],keyCode:  186 },							
                {text:['"',"'"],keyCode:  222 },
                {text:["|","\\"],keyCode:  220 },

            ],
            [
                {text:"⇧ Shift",keyCode:  16 ,width: 8},
                {text:"Z",keyCode:  90 },
                {text:"X",keyCode:  88 },
                {text:"C",keyCode:  67 },
                {text:"V",keyCode:  86 },
                {text:"B",keyCode:  66 },
                {text:"N",keyCode:  78 },
                {text:"M",keyCode:  77 },					
                {text:["<",","],keyCode:  188 },
                {text:[">","."],keyCode:  190 },
                {text:["?","/"],keyCode:  191 },
                {text:"⇧ Shift",keyCode:  16 ,width: 7.5},                
            ],
            [
                {text:"Ctrl",keyCode:  17 ,width:4},
                {text:"Win",keyCode:  91 ,width:4},
                {text:"Alt",keyCode:  18 ,width:4},
                {text:"Space",keyCode:  32 ,width: 20},
                {text:"Alt",keyCode:  18 ,width:3},
                {text:"Win",keyCode:  91 ,width:3},
                {text:"↑",keyCode:  38 ,width:4},
                {text:"Ctrl",keyCode:  17 ,width:4.3},                
            ]
          ];

        const checkedKeys = ref<number[]>([]);

        function getKeyClass(key:keyPros) {
					
					let classes = ['key'];
					if(key.sign){
						classes.push('sign');
					}
          
					if (key.keyCode && checkedKeys.value.includes(key.keyCode)) {
						classes.push('active');
					} 
					return classes.join(' ');
				}
				function keyDown(key:keyPros){
					handleKeyDown(key);	
				}
				function keyUp(key:keyPros){
				    handleKeyUp(key);
				}
        function handleKeyDown(event:any){
            if(event.keyCode==91){
              return;
            }
					    // 阻止常用的系统快捷键
						if (event.ctrlKey || // Ctrl+?
						    event.altKey  || // alt+?
							event.metaKey   // win+?
							) { // Ctrl+Z
							event.preventDefault();
						}
						if (checkedKeys.value.includes(event.keyCode)) {
						    return;
						}
						checkedKeys.value=[...checkedKeys.value,event.keyCode];
        }
        function handleKeyUp(event:any){				
          checkedKeys.value = checkedKeys.value.filter(keyCode => keyCode !== event.keyCode);
        }
        
				function mounted() {
          window.addEventListener('keydown', handleKeyDown);
          window.addEventListener('keyup', handleKeyUp);
          if(props.full){
            buttons.value=buttonsFull;
          }
          else{
            buttons.value=buttonsSimple;
          }
        }
        onMounted(mounted);
        watchEffect(() => { 
          emit('change',checkedKeys.value);
        });
</script>

<template>
  <div class="keyboard" :style="`width: ${(props.full?77:52)+'em'};`">
		<template v-for="(row,i) in buttons" :key="i" >
			<div v-if="row.length" class="row">	
				<template  v-for="(key,j) in row" :key="j" >
					<div v-if="key.logo" :style="`width: ${key.width+'em'};`" class="logo">
						<div class="title">NEWMEN 新贵</div>
						<div class="status">
							<div class="light"></div>
							<!-- <div class="battery">🔋</div> -->
							<div class="battery">🪫</div>
              <div class="power"></div>
						</div>
					</div>
					<div v-else-if="key.text&&key.height">
						<div :style="` width: ${key.width+'em'};height:6.2em;position:absolute;`" 
						:class="getKeyClass(key)"
						@mousedown="keyDown(key)"
						@mouseup="keyUp(key)">
							<div style="height: 100%;padding-top: 2em;">
								{{key.text}}
							</div>
						</div>						
					</div>	
					<!--回车处理-->
					<div v-else-if="key.text&&key.width2">
						<div :style="` width: ${key.width+'em'};height:6.2em;position:absolute;clip-path:polygon(0% 0%, 0% 3em,2em 3em,2em 100%,100% 100%,100% 0%);`" 
							:class="getKeyClass(key)"
							@mousedown="keyDown(key)"
							@mouseup="keyUp(key)"
							>
							<div style="height: 100%;padding-top: 2em;">
								{{key.text}}
							</div>
						</div>						
					</div>	
					<div v-else-if="key.text" :style="`width: ${key.width?key.width+'em':'3em'}`" 
						:class="getKeyClass(key)"
						@mousedown="keyDown(key)"
						@mouseup="keyUp(key)">
						<div class="label" :style="`font-size: ${key.fontSize? key.fontSize+'em':'1em'}`">
							<div>{{key.text instanceof Array? key.text[0]:key.text}}</div>
							<div>{{key.text instanceof Array? key.text[1]:""}}</div>
						</div>				
					</div>	
					<div v-else :style="`width: ${key.width?key.width+'em':'3em'}`"></div>
				</template>					
			</div>
			<div v-else class="tmp-row"></div>
		</template>
		
    </div>
</template>

<style scoped>
    *{
			margin: 0;
			padding: 0;
		}
		.keyboard{
      /* font-size:12px; */
			width: 77em;
			/* height: 100%; */
			background: #1d1c1c;
			border-radius: 1em;
			padding:1em 2em 2em 2em;
			margin: auto;
			user-select: none;
			margin-top: 2em;
      box-shadow:  0em 2em 2.58em #000;
		}
		.keyboard .row{
			display: flex;			
			justify-content: flex-start;						
		}
		.keyboard .key{
			width: 3em;
			height: 3em;
			margin: 0.1em;
			font-size: 1em;			
			background-color: #555;			
			display: flex;
			justify-content: center;
			align-items: center;			
			font-weight: bold;
			color: #fff;
			border-radius: 0.3em;	
			position: relative;
			cursor: pointer;
			
			box-shadow: 0 0 0.1em #000;
			
		}

		.keyboard .key:hover{
			background-color: #666;
		}

		.keyboard .active{
			background-color: #777;
			box-shadow: inset 0 0 0.5em #000;

		}

		.keyboard .sign::after{
		    content: "";
			width:0.5em;
			height: 0.1em;
			background:#fff;
			position: absolute;
			bottom: 0.5em;		
			border-radius: 1em;
		}
		.keyboard .key .label{
			/* line-height: 0.7em; */
			text-align: center;
		}
		.keyboard .tmp-row{
			height: 0.5em;
		}

		.keyboard .logo{
			width: 13em;
			height: 3em;
		}
		.keyboard .logo .title{
		    color: #686767;
			font-weight: bold;
			font-size: 1em;
			text-align: center;
			margin-top: -2em;
			background-color: #1d1c1c;
			border-radius: 2em;
			/* height: 2em; */
			padding:0.6em;
		}
		.keyboard .logo .status{
			width: 50%;
			height: 50%;
			border: 0.1em solid #8f8e8e;
			margin: 0.5em auto;
			display: flex;
			border-radius: 0.3em;
		}
		.keyboard .logo .status .light{
			width:0.4em;
			height: 0.4em;
			border-radius: 0.2em;
			background: #01a329;
			margin:0.5em 0.8em;
		}
		
		.keyboard .logo .status .battery{
			color: white;
		}
		.keyboard .logo .status .power{
			color: white;
		}
</style>
